<template>
    <!-- 党员查询 -->
    <div>
        <a-select
            show-search
            v-bind="$attrs"
            v-on="$listeners"
            :placeholder="placeholder"
            v-model="currentValue"
            option-filter-prop="children"
            :filter-option="filterOption"
            option-label-prop="label"
            style="width: 100%;"
            allowClear
        >
            <a-icon v-if="fetching" style="color: #096dd9" slot="suffixIcon" type="loading" />
            <a-spin v-if="fetching" slot="notFoundContent" size="small" />

            <a-select-option v-for="(item, index) in list" :key="item[replaceFields.value]" 
              :value="item[replaceFields.value]"
              :label="item[replaceFields.name]"
            >
              <!-- {{item[replaceFields.name]}} -->
                {{item[replaceFields.optName]}}
            </a-select-option>
        </a-select>
    </div>
</template>
<script>
import { queryAllPartyMemberList } from '@/api/partyMasses'
export default {
  name:'a'+ Date.now(),
  data() {
        return {
            fetching: false,
            list: [],
        }
    },
    props: {
        params: {
          type: Object,
          default() {
            return {}
          }
        },
        // v-model绑定的数据
        value: {
            type: [Array, String, Object, Number],
        },
        replaceFields: {
          type: Object,
          default() {
              return { value: 'userId', name: 'userName', optName: 'optName' }
          },
        },
        dataList: {
          type: Array,
          default() {
            return []
          }
        },
        placeholder: {
            type: String,
            default() {
                return '请选择'
            },
        },
    },
    computed: {
        // 转换绑定的选中数据，与v-model同步
        currentValue: {
            get: function () {
                // if (this.list.length > 0) {
                //     this.$emit(
                //         'update:option',
                //         this.list?.find((item) => item.id === this.value)
                //     )
                //     this.$emit(
                //         'getOption',
                //         this.list.find((item) => item.id === this.value)
                //     )
                // }
                return this.value ? this.value : undefined
            },
            set: function (value) {
                this.$emit('input', value)
            },
        },
    },
    mounted() {
      if (this.dataList.length > 0) {
        this.list = this.dataList;
      } else {
        this.querySelectData();
      }
    },
    methods: {
      querySelectData() {
        // 获取下拉框列表
        this.fetching = true;
        queryAllPartyMemberList(this.params).then((res) => {
            this.fetching = false
            const dataList = res.data || [];
            this.list = dataList
            // this.$emit('update:list', this.list)
            // this.$emit('getList', this.list)
        })
        .catch((res) => {
            this.fetching = false;
        })
      },
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      }
    }
}
</script>
